<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <a-tabs default-active-key="1" style="background: #fff">
        <a-tab-pane key="1" tab="界面还原">
            <a-layout>
                <a-layout-sider style="background: #fff">
                    <a-card :bordered="false" :style="clientHeight" >
                        <a-timeline>
                            <a-timeline-item @click="clickTest(timeLineItem)" v-for="timeLineItem in timeLineItems" :key="timeLineItem.oplogId">
                                <a-tooltip>
                                    <template slot="title">
                                        点击查看界面还原
                                    </template>
                                    <div>{{timeLineItem.actName}}</div>
                                    <div>{{timeLineItem.opTime}}</div>
                                    <div>操作人:{{timeLineItem.opName}}</div>
                                    <div>{{timeLineItem.authRemarks}}</div>
                                </a-tooltip>
                            </a-timeline-item>
                            <a-timeline-item v-for="doingitem in timeLineDoing" :key="doingitem.executionId">
                                <a-icon slot="dot" type="loading" style="font-size: 16px;" />
                                <div>{{doingitem.actName}}</div>
                                <div>操作人:{{doingitem.assigneeName}}</div>
                                <div>办理中</div>
                            </a-timeline-item>
                        </a-timeline>
                    </a-card>
                </a-layout-sider>
                <a-layout-content>
                    <div>
                        <a-card :bordered="false" >
                            <div><h2 style="color: blue">{{this.titleRe}}界面还原</h2></div>
                            <component :is="item" v-for="item in allComponents" :key="item"  :formData="formData" :style="clientHeight"/>
                        </a-card>
                    </div>
                </a-layout-content>
            </a-layout>
        </a-tab-pane>
        <a-tab-pane key="2" tab="流程展示" force-render>
            <act-flow-image :imagePara="imagePara"/>
        </a-tab-pane>
    </a-tabs>
</template>

<script>
    import {getListByBusNo,getDataVO} from "@/services/system/api"
    import ALayoutSider from "ant-design-vue/es/layout/Sider";
    import MissRePage from "@/pages/overview/MissRePage";
    import ActFlowImage from "@/pages/overview/ActFlowImage";

    export default {
        name: 'CommonAudit',
        components: {
            ALayoutSider,
            MissRePage,
            ActFlowImage
        },
        data(){
            return{
                //结束日志
                timeLineItems: null,
                //正在进行环节
                timeLineDoing:null,
                //数据字典
                dictData: {},
                //动态组件及数据
                allComponents:["MissRePage"],
                formData:null,
                //还原页面标题
                titleRe:null,
                //浏览器高度70%
                clientHeight:{"overflow":"scroll","height":(document.body.clientHeight*0.7)+'px'},
                //实例图片入参
                imagePara:{busNo: this.$route.query.busNo,procInstId:this.$route.query.procInstId},
            }
        },
        created() {
            // 发送请求获取界面还原数据
            var param={
                "automaticFlag": true,
                "busNo": this.$route.query.busNo,
                "rollbackFlag": true
            };
            this.$http.post(getListByBusNo,param).then((res) => {
                var finishList=res.result.finishList;
                this.timeLineItems=finishList;
                //默认还原界面选取启动节点,若不存在启动节点则默认第一笔操作日志
                var oplog=finishList[0];
                for(var i=0;i<finishList.length;i++){
                    if(finishList[i].auType=='start'){
                        oplog= finishList[i];
                    }
                }
                //是否存在待办业务
                if(res.result.doingFlag==true){
                    this.timeLineDoing=res.result.doingList;
                }
                this.clickTest(oplog);
            }).catch(() => {

            })

        },
        methods:{
            //根据oplog查询还原界面和数据进行还原
            clickTest(oplog){
                console.log(oplog)
                this.titleRe=oplog.actName;
                //根据日志节点id查询对应的还原组件和还原数据
                var param={
                    "busNo": oplog.busNo,
                    "oplogId": oplog.oplogId
                };
                this.$http.post(getDataVO,param).then((res) => {
                    if(res.result.formKeyList==undefined){
                        this.allComponents=["MissRePage"];
                    }else {
                        this.allComponents=res.result.formKeyList;
                        this.formData=res.result.formData;
                    }
                }).catch(() => {

                })
            },
        }
    }
</script>